<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>参数管理</el-breadcrumb-item>
      <el-breadcrumb-item>参数列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片 -->
    <el-card>
      <!-- 消息提示 -->
      <el-alert :closable="false"
                title="注意：只允许设置三级分类的参数"
                type="warning"
                show-icon>
      </el-alert>
      <!-- 行  选择商品分类区域 -->
      <el-row class="cat_opt">
        <el-col>
          <span>选择商品分类：</span>
          <el-cascader v-model="selecetedCates"
                       clearable
                       :options="setCateList"
                       :props="{
              checkStrictly: true,
              expandTrigger: 'hover',
              value: 'cat_id',
              label: 'cat_name',
              children: 'children',
            }"
                       @change="handleChange"></el-cascader>
        </el-col>
      </el-row>
      <!-- tab页签区域 -->
      <el-row>
        <el-col>
          <el-tabs v-model="activeName"
                   @tab-click="handleChange">
            <!-- 一旦点击选项卡 就会 将选项卡的name值设置给activeName属性 -->
            <!-- 添加动态参数的面板 -->
            <el-tab-pane label="动态参数"
                         name="many">
              <!-- 按钮 -->
              <el-button @click="showManyDialog"
                         type="primary"
                         size="mini"
                         :disabled="disableBtn">添加动态参数</el-button>
              <!-- 动态数据 表格 -->
              <el-table :data="manyData"
                        border
                        stripe>
                <el-table-column type="expand">
                  <template slot-scope="scope">
                    <el-tag @close="delTag(ind,scope.row)"
                            closable
                            :key="ind"
                            v-for="(attr,ind) in scope.row.attr_vals">{{attr}}</el-tag>
                    <!-- 新增文本框 -->
                    <el-input class="input-new-tag"
                              v-if="scope.row.inputVisible"
                              v-model="scope.row.addTagInputValue"
                              ref="saveTagInput"
                              size="small"
                              @keyup.enter.native="addTag(scope.row)"
                              @blur="addTag(scope.row)">
                    </el-input>
                    <!-- 新增按钮 -->
                    <el-button v-else
                               class="button-new-tag"
                               size="small"
                               @click="showInput(scope.row)">+ New Tag</el-button>
                  </template>
                </el-table-column>
                <el-table-column type="index"
                                 label="#"> </el-table-column>
                <el-table-column prop="attr_name"
                                 label="参数名称"></el-table-column>
                <el-table-column label="操作"
                                 prop="address">
                  <template slot-scope="scope">
                    <el-button @click="showEditDialog(scope.row)"
                               type="primary"
                               icon="el-icon-edit"
                               size="mini">编辑</el-button>
                    <el-button type="danger"
                               icon="el-icon-delete"
                               size="mini"
                               @click="doDel(scope.row.attr_id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>

            <!-- 添加静态属性的面板 -->
            <el-tab-pane label="静态属性"
                         name="only">
              <!-- 按钮 -->
              <el-button @click="showManyDialog"
                         type="primary"
                         size="mini"
                         :disabled="disableBtn">添加静态属性</el-button>
              <!-- 静态数据 表格 -->
              <el-table :data="onlyData"
                        border
                        stripe>
                <el-table-column type="expand">
                  <template slot-scope="scope">
                    <el-tag @close="delTag(ind,scope.row)"
                            closable
                            :key="ind"
                            v-for="(attr,ind) in scope.row.attr_vals">{{attr}}</el-tag>
                    <!-- 新增文本框 -->
                    <el-input class="input-new-tag"
                              v-if="scope.row.inputVisible"
                              v-model="scope.row.addTagInputValue"
                              ref="saveTagInput"
                              size="small"
                              @keyup.enter.native="addTag(scope.row)"
                              @blur="addTag(scope.row)">
                    </el-input>
                    <!-- 新增按钮 -->
                    <el-button v-else
                               class="button-new-tag"
                               size="small"
                               @click="showInput(scope.row)">+ New Tag</el-button>
                  </template>
                </el-table-column>
                <el-table-column type="index"
                                 label="#"> </el-table-column>
                <el-table-column prop="attr_name"
                                 label="参数名称"></el-table-column>
                <el-table-column label="操作"
                                 prop="address">
                  <template slot-scope="scope">
                    <el-button @click="showEditDialog(scope.row)"
                               type="primary"
                               icon="el-icon-edit"
                               size="mini">编辑</el-button>
                    <el-button type="danger"
                               icon="el-icon-delete"
                               size="mini"
                               @click="doDel(scope.row.attr_id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </el-card>
    <!-- 添加分类动态属性对话框 -->
    <el-dialog :title="activeName == 'many' ? '添加动态属性' : '添加静态属性'"
               :visible.sync="isShowManyDialog"
               width="50%">
      <!-- 对话框 内容区 -->
      <el-form ref="form"
               :model="addManyForm"
               :rules="addManyFormRule"
               label-width="121px">
        <el-form-item :label="activeName == 'many' ? '动态属性名称：' : '静态参数名称：'"
                      prop="attr_name">
          <el-input v-model="addManyForm.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="isShowManyDialog = false">取 消</el-button>
        <el-button type="primary"
                   @click="doAddMany">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改分类动态属性对话框 -->
    <el-dialog :title="activeName == 'many' ? '修改动态属性' : '修改静态属性'"
               :visible.sync="isShowEditDialog"
               width="50%"
               v-dialogDrag>
      <!-- 对话框 内容区 -->
      <el-form ref="form"
               :model="editManyForm"
               :rules="editManyFormRule"
               label-width="121px">
        <el-form-item :label="activeName == 'many' ? '动态属性名称：' : '静态参数名称：'"
                      prop="attr_name">
          <el-input v-model="editManyForm.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="isShowEditDialog = false">取 消</el-button>
        <el-button type="primary"
                   @click="doEditMany">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  created () {
    // 请求分类列表数据 用在 分类下拉框
    this.getCateList()
  },
  data () {
    return {
      // 下拉框 选中分类的id
      selecetedCates: [],
      // 分类下拉框数据数组
      setCateList: [],
      // 选中 tab栏的名称（name->many/only)
      activeName: 'many',
      // 动态参数数组
      manyData: [],
      // 静态参数数组
      onlyData: [],
      // 是否显示 添加数据 对话框
      isShowManyDialog: false,
      // 是否显示 修改数据 对话框
      isShowEditDialog: false,
      // 添加 动态参数 的数据对象
      addManyForm: {
        // 参数名字
        attr_name: '',
        // 参数类型（many/only）
        attr_sel: 0
      },
      // 添加 动态参数的 校验规则对象
      addManyFormRule: {
        attr_name: [
          { required: true, message: '请输入动态参数', trigger: 'blur' },
          {
            min: 1,
            max: 10,
            message: '长度在 1 到 10 个字符',
            trigger: 'blur'
          }
        ]
      },
      // 编辑 动态参数 的数据对象
      editManyForm: {
        // 参数名字
        attr_name: '',
        // 参数类型（many/only）
        attr_sel: 0
      },
      // 编辑 动态参数的 校验规则对象
      editManyFormRule: {
        attr_name: [
          { required: true, message: '请输入动态参数', trigger: 'blur' },
          {
            min: 1,
            max: 10,
            message: '长度在 1 到 10 个字符',
            trigger: 'blur'
          }
        ]
      },
      // 添加数据项 标签 的 显示开关
      inputVisible: false,
      // 添加数据项 标签 的 属性
      addTagInputValue: ''
    }
  },
  // 计算属性
  computed: {
    // 返回 是否是有选中 3级分类
    disableBtn () {
      // 计算属性中的数据只要改变 就会重新执行
      // 如果 选中分类数量 不等于3 则 返回true 禁用两个按钮
      return this.selecetedCates.length !== 3
    }
  },
  methods: {
    // 确认添加 数据项标签 方法
    async addTag (rowData) {
      // 数据检查,如果未输入,则清空文本框,并隐藏
      if (rowData.addTagInputValue.trim().length === 0) {
        rowData.addTagInputValue = ''
        rowData.inputVisible = false
        return
      }
      // 检查通过后:
      // 隐藏文本框,显示 新增tag按钮
      rowData.attr_vals.push(rowData.addTagInputValue.trim())
      rowData.addTagInputValue = ''
      this.updataTag(rowData)
      // 隐藏文本框
      rowData.inputVisible = false
    },
    async updataTag (rowData) {
      // 将 新增tag 提交 服务器接口保存
      const cateId = this.selecetedCates[2]
      const { data: resData } = await this.$http.put(`categories/${cateId}/attributes/${rowData.attr_id}`, {
        attr_name: rowData.attr_name,
        attr_sel: rowData.attr_sel,
        attr_vals: rowData.attr_vals.join(',')
      })
      // 如果失败
      if (resData.meta.status !== 200) return this.$message.error(resData.meta.msg)
      // 如果成功
      this.$message.success(resData.meta.msg)
    },
    // 显示 添加 数据项标签 文本框方法
    showInput (rowData) {
      // 将数据 当前行的 行数据对象 里的 开关打开,显示 新增文本框
      rowData.inputVisible = true
      // 将显示的文本框 设置焦点
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    // 删除 tag 事件
    delTag (ind, rowData) {
      this.$messageBox.confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        callback: action => {
          // 如果点击取消
          if (action === 'cancel') return
          // 如果点击确定
          // 删除 视图中 的 标签
          rowData.attr_vals.splice(ind, 1)
          // 异步请求接口,完成删除标签更新操作
          this.updataTag(rowData)
        }
      })
    },
    // 获取分类列表数据
    async getCateList () {
      const { data: resData } = await this.$http.get('categories')
      // 判断是否有问题
      if (resData.meta.status !== 200) { return this.$message.error(resData.meta.msg) }
      // 如果成功 保存 分类数组
      this.setCateList = resData.data
    },
    // 分类下拉框 改变事件函数
    async handleChange () {
      // 如果 选中类别id数组 元素少于3个
      // 说明没有选中第三级分类 所以清空选中项
      if (this.selecetedCates.length < 3) {
        // 清空下拉框绑定的数据项数组,从而达到 清空下拉框选中项 的目的
        this.selecetedCates.length = 0
        // 清空 动态数据项 和 静态数据项 表格 数组
        this.manyData = []
        this.onlyData = []
        return
      }
      // 如果 选中了 三级分类 则 请求这分类的【动态参数】
      // 取出 当前选中的 第三级分类id（数组中下标为2的这个）
      const cateId = this.selecetedCates[2]
      // 请求接口 获取 动态属性(many)数据
      const { data: resData } = await this.$http.get(
        `categories/${cateId}/attributes`,
        {
          params: { sel: this.activeName }
        }
      )
      // 修改 返回的 数据项 数组中 元素的attr_vals 属性,将它修改成数组
      resData.data.forEach(ele => {
        // 如果不为空,则用 , 拆分
        if (ele.attr_vals) ele.attr_vals = ele.attr_vals.split(',')
        else ele.attr_vals = []
        // 为每一个数据对象 添加inputVisible属性 来控制当前行的[添加标签按钮和文本框]
        ele.inputVisible = false
        // 为每一个数据对象 添加addTagInputValue属性,来保存输入的新文本
        ele.addTagInputValue = ''
      })
      // 如果失败
      if (resData.meta.status !== 200) { return this.$message.error(resData.meta.msg) }
      // 如果成功 根据当前选项卡名字 将数组设置给 不同的数组
      if (this.activeName === 'many') this.manyData = resData.data
      else if (this.activeName === 'only') this.onlyData = resData.data
    },
    // 切换tab栏
    tabClick () { },
    // 显示 添加 动态参数 对话框
    showManyDialog () {
      this.isShowManyDialog = true
    },
    // 确定 新增 动态参数 按钮
    async doAddMany () {
      // 获取 选中 tab栏的 name值（many/only）
      this.addManyForm.attr_sel = this.activeName
      // 获取下拉框选中 第三级分类 的id
      const cateId = this.selecetedCates[2]
      // 异步请求接口 获取 数据后 解构 data属性 到 resData
      const { data: resData } = await this.$http.post(
        `categories/${cateId}/attributes`,
        this.addManyForm
      )
      // 如果失败 报错
      if (resData.meta.status !== 201) { return this.$message.error(resData.meta.msg) }
      // 如果成功 关闭对话框 重置对话框 刷新列表
      this.isShowManyDialog = false
      this.addManyForm.attr_name = ''
      this.addManyForm.attr_sel = 'many'
      // 刷新 分类 的 动态或静态数据列表
      this.handleChange()
    },
    // 显示 修改 对话框
    showEditDialog (rowData) {
      // 显示 修改对话框
      this.isShowEditDialog = true
      // 将 当前数据项目的名称 显示到 文本框
      this.editManyForm.attr_name = rowData.attr_name
      // 将 当前修改的 数据项id保存
      this.editManyForm.attrId = rowData.attr_id
    },
    // 确定 修改 数据按钮
    async doEditMany () {
      // 获取数据所属 的 分类的id
      const cateId = this.selecetedCates[2]
      // 获取 当前修改的数据项的 id
      const attrId = this.editManyForm.attrId
      // 获取 数据类型 （根据 tab选项卡来拿） many/only
      this.editManyForm.attr_sel = this.activeName
      // 调用接口执行修改
      const { data: resData } = await this.$http.put(
        `categories/${cateId}/attributes/${attrId}`,
        this.editManyForm
      )
      if (resData.meta.status !== 200) this.$message.error(resData.meta.msg)
      this.$message.success(resData.meta.msg)
      // 关闭对话框
      this.isShowEditDialog = false
      // 更新列表数据
      this.handleChange()
      // 重置表单数据（无所谓，只是习惯性严谨）
      this.editManyForm.attr_sel = '' // 清空 数据项类型
      this.editManyForm.attr_name = '' // 清空文本框
      this.editManyForm.attrId = 0 // 清空 数据项id
    },
    doDel (attrId) {
      // 1.提示确定删除
      this.$messageBox.confirm('确定要删除吗', '系统提示', {
        confirmButtonText: '确定',
        callback: async (action) => {
          // 如果点击的是取消按钮 则 停止执行函数
          if (action === 'cancel') return
          // 2.如果确认 则调用删除接口
          const { data: resData } = await this.$http.delete(
            `categories/${this.selecetedCates[2]}/attributes/${attrId}`
          )
          // 判断删除结果 如果失败 提示错误
          if (resData.meta.status !== 200) {
            return this.$message.error(resData.meta.msg)
          }
          // 3.如果删除成功 则 刷新列表 并提示成功
          this.$message.success(resData.meta.msg)
          this.handleChange()
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.cat_opt {
  margin: 15px 0;
}
.el-tag {
  margin: 10px;
}
.input-new-tag {
  width: 100px;
}
</style>
